<template>
  <div class="order-song-wrapper">
    <div class="search-input">
      <div class="label">历史点歌列表</div>
    </div>
    <div class="order-list common-list">
      <ul v-loading="loading">
        <li v-for="(item, idx) in list" :key="idx">
          <div class="album">
            <img v-lazy="{ src: item.picUrl, loading: defaultImg, error: defaultImg }" alt="" />
          </div>
          <div class="song-info">
            <div class="song-name">
              {{ item.name }}
            </div>
            <div class="song-artist">
              <span>点过:</span><span style="padding-right: 5px; color: #666">{{ item.count }}次</span> <span>歌手:</span>
              <span>{{ item.artist }}</span>
            </div>
          </div>
          <div class="song-order">
            <el-button @click.stop="delSong(item)">删除</el-button>
            <el-button @click.stop="setMusicId(item)">点歌</el-button>
          </div>
        </li>
      </ul>
      <ShowLoading :loading="loading" />
    </div>
  </div>
</template>
<script>
import { CommonEnum } from '@/enums'
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useObserverHook } from '@/hooks'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const store = useStore()
    const searchKey = ref('')
    const defaultImg = require('../../../../assets/images/loading.gif')
    let state = reactive({
      songCount: 0,
      list: [],
      pageNum: CommonEnum.PAGE.pageNum - 1,
      pageSize: CommonEnum.PAGE.pageSize,
      musicId: null,
      loading: false
    })
    useObserverHook('#' + CommonEnum.LOADING_ID, entries => {
      console.log(entries)
      if (!state.loading && entries[0].isIntersecting) {
        state.pageNum = state.pageNum + 1
        console.log(state.pageNum)
        loadMoreSong()
      }
    })
    let songOrderList = computed(() => {
      return store.getters.songOrderList
    })
    const loadMoreSong = async () => {
      state.loading = true
      const res = await store.dispatch('_postOrderHistoryList', { pageNum: state.pageNum, pageSize: state.pageSize })
      let result = res ? res.data : []
      if (result.length) {
        state.list = [...state.list, ...result]
        if (state.list.length < state.pageSize) {
          state.loading = false
        }
      }
      state.loading = false
    }
    const fetchSongOrderList = async () => {
      state.loading = true
      state.pageNum = 1
      const res = await store.dispatch('_postOrderHistoryList', { pageNum: state.pageNum, pageSize: state.pageSize })
      state.list = res ? res.data : []
      state.loading = false
    }
    const _getSongCanUse = async id => {
      const res = await store.dispatch('_getSongCanUse', { id })
      console.log(res)
      if (res) {
        return res.success
      }
    }
    const _postAddSongOrder = async item => {
      //   let params = {
      //     songId: item.id,
      //     name: item.name,
      //     picUrl: item.al.picUrl,
      //     artist: getArtist(item.ar),
      //     duration: item.dt
      //   }
      const res = await store.dispatch('_postAddSongOrder', { ...item })
      console.log(res)
      if (res) {
        // await store.dispatch('_postAddOrderHistory', { ...item })
        ElMessage.success({
          message: '添加成功'
        })
        store.dispatch('updateOrderList')
      }
    }
    const setMusicId = async item => {
      let res = await _getSongCanUse(item.songId)
      console.log(res)
      if (res) {
        _postAddSongOrder(item)
      }
    }

    const getArtist = item => {
      return item.map(v => v.name).join('&')
    }
    const delSong = async item => {
      state.loading = true
      let res = await store.dispatch('_postDelOrderHistory', { id: item.songId })
      if (res) {
        ElMessage.success({
          message: '删除成功'
        })
      }
      fetchSongOrderList()
    }
    onMounted(() => {
      //   fetchSongOrderList()
    })
    return {
      ...toRefs(state),
      searchKey,
      fetchSongOrderList,
      getArtist,
      songOrderList,
      defaultImg,
      setMusicId,
      delSong
    }
  }
}
</script>
<style lang="scss">
@import '@/style/mixin.scss';
.order-song-wrapper {
  height: 100%;
  .order-list {
    height: calc(100% - 65px);
  }
  .search-input {
    background: #fff;
    margin: 0 0 10px 0;
    .label {
      padding: 12px;
      text-align: left;
      font-size: 18px;
      background-color: #fff;
    }
    .input {
      display: flex;
      padding: 0 12px 0 12px;
    }
    .el-input__inner {
      border-radius: 4px 0 0 4px;
      border-right: none;
    }
    .el-button--small {
      border-radius: 0 4px 4px 0;
    }
  }
}
</style>
